<template>
  <div id="user-info" class="center">
    请选择用户:
    <el-select v-model="userStr" filterable placeholder="请选择" @change="onChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.data"></el-option>
    </el-select>
    <el-button type="primary" @click="addVisible = true">新增</el-button>
    <hr />
    <div id="workarea">
      <el-form ref="loginForm" label-width="80px" :model="user">
        <el-form-item label="用户名:">
          <el-col :span="9">
            <el-input v-model="user.user" disabled></el-input>
          </el-col>
          <el-col class="line" :span="4">密码:</el-col>
          <el-col :span="9">
            <el-input v-model="user.psw"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="权限:">
          <el-tree
          :data="docs"
          show-checkbox
          default-expand-all
          node-key="name"
          ref="tree"
          highlight-current
          :props="defaultProps">
        </el-tree>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateUser">修改</el-button>
          <el-button @click="deleteUser">删除</el-button>
        </el-form-item>
      </el-form>
    </div>
    <add-user :visible.sync="addVisible" @add="addUserHandle"></add-user>
  </div>
</template>
<script type="text/javascript">
  import addUser from './add-user'

  export default {
    data () {
      return {
        options: [],
        userStr: '',
        user: {},
        docs: [],
        addVisible: false,
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    },
    mounted () {
      this.loadUser().then(() => {
        this.$api.call({ service: 'get-docs' }).then((data) => {
          console.log('docs: ', data)
          let tree = []
          for (let k in data) {
            let children = []
            tree.push({
              name: k,
              children
            })
            for (let v of data[k]) {
              children.push({
                name: v
              })
            }
          }
          console.log('tree: ', tree)
          this.$set(this, 'docs', tree)
        })
      })
    },
    methods: {
      loadUser () {
        return this.$api.call({ service: 'all-user' }).then((data) => {
          console.log(data)
          let options = []
          for (let v of data) {
            options.push({
              label: v.name,
              value: v.user,
              data: JSON.stringify(v)
            })
          }
          this.$set(this, 'options', options)
          this.userStr = ''
        })
      },
      onChange () {
        this.$set(this, 'user', JSON.parse(this.userStr))
        console.log('user: ', this.user)
        if (this.user.auth) {
          let node = []
          for (let v of this.user.auth) {
            node.push({ name: v })
          }
          console.log('node ---> ', node)
          this.$refs.tree.setCheckedNodes(node)
        }
      },
      updateUser () {
        this.user.auth = this.$refs.tree.getCheckedKeys()
        this.$confirm('是否提交修改?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$api.call({
            service: 'update-user',
            body: this.user
          })
        }).then(() => {
          return this.loadUser()
        }).then(() => {
          this.$alert('保存成功!')
        })
      },
      deleteUser () {
        this.$confirm('确定要删除用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$api.call({
            service: 'del-user',
            body: this.user
          })
        }).then(() => {
          this.userStr = ''
          this.user = {}
          return this.loadUser()
        }).then(() => {
          this.$alert('删除成功!')
        })
      },
      addUserHandle (bool) {
        if (bool) {
          this.loadUser()
        }
      }
    },
    components: {
      addUser
    }
  }
</script>
<style type="text/css">
  .center {
    text-align: center;
  }
  hr{
    margin-top: 20px;
  }
  #workarea {
    width: 60%;
    height: 300px;
    margin: 20px auto;
  }
</style>